<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <!-- jQuery WeUI -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body >
    <div class="search-wrap">
        <!--顶部搜索-->
        <div class="weui-search-bar search-bar-wrap" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box search-bar-container">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="输入商家、商品名称" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <!--<label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>-->
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn search-bar-btn-cancel" id="searchCancel">取消</a>
        </div>
        <!--历史搜索-->
        <div class="hot-wrap">
            <div class="hot-top"><span>历史搜索</span><span class="hot-del"></span></div>
            <div class="hot-bot">
                <ul class="hot-ul">
                    <li class="hot-li">青菜</li>
                    <li class="hot-li">鸡蛋</li>
                    <li class="hot-li">梭子蟹</li>
                    <li class="hot-li">河鲫鱼</li>
                    <li class="hot-li">日本豆腐</li>
                    <li class="hot-li">三个字</li>
                    <li class="hot-li">三个字</li>
                    <li class="hot-li">鸡蛋</li>
                </ul>
            </div>
        </div>
        <!--热门搜索-->
        <div class="hot-wrap">
            <div class="hot-top"><span>热门搜索</span></div>
            <div class="hot-bot">
                <ul class="hot-ul">
                    <li class="hot-li">青菜</li>
                    <li class="hot-li">鸡蛋</li>
                    <li class="hot-li">梭子蟹</li>
                    <li class="hot-li">河鲫鱼</li>
                    <li class="hot-li">日本豆腐</li>
                    <li class="hot-li">三个字</li>
                    <li class="hot-li">三个字</li>
                    <li class="hot-li">鸡蛋</li>
                </ul>
            </div>
        </div>
    </div>
</body>
<!-- jQuery WeUI -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<!-- jQuery WeUI拓展插件需要的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
<script>

</script>
</html>
